<template>
  <view v-if="modelValue" class="x-modal x-flex-column-center" @tap.stop="closeModel">
    <view class="middleContent x-flex-column-between">
      <view v-if="showTitle" class="title x-flex-row-center">{{title}}</view>
      <slot></slot>
      <view class="foot x-flex-row-between-center" v-if="showBotton">
        <view class="confirm" @tap.stop="emits('confirm')">{{confirmText}}</view>
      </view>
    </view>
  </view>
</template>

<script setup>
import {
  onMounted,
  ref
} from "vue";
const props = defineProps({
  modelValue: {
    type: Boolean,
    default: false
  },
  'confirmText': {
    type: String,
    default: '确定'
  },
  'cancelText': {
    type: String,
    default: '取消'
  },
  title: {
    type: String,
    default: '标题'
  },
  canColse: {
    type: Boolean,
    default: true
  },
  showTitle: {
    type: Boolean,
    default: true
  },
  showBotton: {
    type: Boolean,
    default: true
  },
})
const emits = defineEmits(['update:modelValue', 'confirm', 'cancel', 'canColse', 'showBotton', 'showTitle'])
const modalShow = ref(false)

function closeModel() {
  if (props.canColse) {
    emits('update:modelValue', false)
  }

}
</script>

<style lang="scss">
.x-modal {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: rgba(0, 0, 0, 0.4);
  z-index: 9999;

  .middleContent {
    width: 90vw;
    width: 660rpx;
    background: #ffffff;
    border-radius: 16rpx;
    padding: 0 32rpx;
    padding-bottom: 32rpx;

    .title {
      font-size: 32rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #000000;
      line-height: 38rpx;
      padding: 48rpx;
      padding-bottom: 36rpx;
      word-spacing: 1rpx;
    }
    .cont {
      flex: 1;
      display: flex;
      flex-wrap: wrap;
      // justify-content: center;
      // align-items: center;
      // text-align: center;
      width: 100%;
      // min-height: 16vh;
      // max-height: 50vh;
      font-size: 30rpx;
      font-family: PingFang SC-Medium, PingFang SC;
      font-weight: 500;
      color: #636363;
      line-height: 46rpx;
      word-wrap: break-word;
      word-spacing: 1px;
    }

    .foot {
      padding-top: 48rpx;
      .cancel,
      .confirm {
        width: 100%;
        height: 72rpx;
        box-shadow: 4rpx 4rpx 12rpx 2rpx rgba(171, 181, 197, 0.06);
        border-radius: 36rpx;
        text-align: center;
        line-height: 72rpx;
        font-weight: 500;
        box-shadow: rgba(0, 0, 0, 0.16) 0px 1px 4px;
      }

      .cancel {
        background: #f6f6f6;
      }

      .confirm {
        background: #486aef;
        color: #ffffff;
      }
    }
  }
}
</style>